import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Radio} from "../../../../packages";
import RadioGroup from "../../../../packages/components/RadioGroup";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="基本用法">
      <Radio v-model={state.formData.flag} label="真假"/>{JSON.stringify(state.formData.flag)}
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="单选组">
      <RadioGroup v-model={state.formData.flag}>
        <Radio label="Vue2.0" value="vue2"/>
        <Radio label="Vue3.0" value="vue3"/>
        <Radio label="React" value="react"/>
        <Radio label="Angular" value="angular"/>
      </RadioGroup>
      {JSON.stringify(state.formData.flag)}
    </DemoRow>
  );
});

export const demo3 = designPage(() => {

  const state = reactive({
    formData: { flag: 'react' } as any
  });

  return () => (
    <DemoRow title="单选按钮组">
      <RadioGroup v-model={state.formData.flag} buttonFlag buttonStyle="solid">
        <Radio label="Vue2.0" value="vue2"/>
        <Radio label="Vue3.0" value="vue3"/>
        <Radio label="React" value="react"/>
        <Radio label="Angular" value="angular"/>
      </RadioGroup>
      <br/>
      <br/>
      <RadioGroup v-model={state.formData.flag} buttonFlag>
        <Radio label="Vue2.0" value="vue2"/>
        <Radio label="Vue3.0" value="vue3"/>
        <Radio label="React" value="react"/>
        <Radio label="Angular" value="angular"/>
      </RadioGroup>
      {JSON.stringify(state.formData.flag)}
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const state = reactive({
    formData: { flag: { id: '3', label: 'React' } } as any
  });

  const options = [
    { id: '1', label: 'Vue2.0' },
    { id: '2', label: 'Vue3.0' },
    { id: '3', label: 'React' },
    { id: '4', label: 'Angular' },
  ];

  return () => (
    <DemoRow title="绑定对象">
      <RadioGroup v-model={state.formData.flag} buttonFlag buttonStyle="solid">
        {options.map(option => (
          <Radio label={option.label} value={option} key={option.label}/>
        ))}
      </RadioGroup>
      <br/>
      <br/>
      <RadioGroup v-model={state.formData.flag} buttonFlag>
        {options.map(option => (
          <Radio label={option.label} value={option} key={option.label}/>
        ))}
      </RadioGroup>
      {JSON.stringify(state.formData.flag)}
    </DemoRow>
  );
});
